
import * as React from 'react';
import { fetch } from '../../../renderers/util';
// import { DatePicker } from 'antd';
import {render} from '../../../renderers/factory';
import * as moment from 'moment';
import './style.scss';
import '../../../node_modules/echarts/map/js/china'

export default class OrderStatistic  extends React.Component {
    constructor(props) {
        super(props);
        this.changePanel = this.changePanel.bind(this);

        this.state = {
            reward_count: 0,
            reward_yesterday_count: 0,
        };
    }

    componentDidMount() {
        fetch(`/api/order/current_count`)
            .then(ret => this.setState({
                ...ret.data,
            }));
    }

    changePanel(e) {
        if (!e && !this.state.tab0) {
            this.setState({
                tab0: true,
                tab1: false
            })
        }

        if (e && !this.state.tab1) {
            this.setState({
                tab0: false,
                tab1: true
            })
        }
    }

    render() {
        const {
            yesterday_order,
            total_order,
        } = this.state;
        let defaultRangeDate = moment().add(-60, 'days').format('X') + ',' + moment().format('X'); // 默认dateRange为60天

        return (
            <div>
                <div className="bg-light b-b wrapper"><h1 className="m-n font-thin h3 text-black">数据统计</h1></div>
                <div className="page-body wrapper">
                    <div className="bg-white b-l b-r b-b wrapper-md">
                        <div className='info_box'>
                            <div className="inner">
                                <div className="info_hd append_ask">
                                    <h4>昨日关键指标</h4>
                                </div>
                                <div className="info_bd">
                                    <div className="content" id="js_keydata">
                                        <table className="ui_trendgrid ui_trendgrid_3">
                                            <tbody>
                                            <tr>
                                                <td className="first">
                                                    <div className="ui_trendgrid_item">

                                                        <span className="text-color text-md">新增订单数</span>
                                                        <div className="h1 text-info font-thin h2">
                                                            {yesterday_order || 0}
                                                        </div>
                                                    </div>
                                                </td>
                                                <td className="first">
                                                    <div className="ui_trendgrid_item">

                                                        <span className="text-color text-md">累计订单数</span>
                                                        <div className="h1 text-info font-thin h2">
                                                            {total_order || 0}
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="wrapper-md" style={{backgroundColor: '#fff'}}>
                            <div className="row">
                                {
                                    render('page', {
                                        type: 'page',
                                        title: '',
                                        bodyClassName: '',
                                        body: [
                                            {
                                                type: "form",
                                                name: "sample2",
                                                target: "chart1",
                                                // reload: "chart1",
                                                className: "chart-form",
                                                wrapWithPanel: false,
                                                submitText: '查询',
                                                title: '',
                                                mode: "inline",
                                                controls:
                                                    [
                                                        {
                                                            type: "date-range",
                                                            name: "date_range",
                                                            label: "日期范围",
                                                            joinValues: true,
                                                            value: defaultRangeDate
                                                        },

                                                        {
                                                            type: "select",
                                                            name: "org_id",
                                                            label: "机构查询",
                                                            placeholder: "机构名称",
                                                            clearable: true,
                                                            autoComplete: '/api/org/sug?not_options=1&_=${_}',
                                                            visibleOn: 'acl.can("org:create")'
                                                        },
                                                    ]
                                            },
                                            {
                                                type: "chart",
                                                api: "/api/order/statistic?org_id=${org_id}&date_range=${date_range}",
                                                interval: false,
                                                name: 'chart1',
                                                className: "increase-chart",
                                            }
                                        ]

                                    }, this.props)
                                }
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
};